<template>
    <view class="event-list">
        <view class="event-item" v-for="(event, index) in hotEvents" :key="index">
            <view class="event-detail">
                <view class="event-image">
                    <image :src="event.image" mode="aspectFill"></image>
                    <view class="event-tag ing" v-if="event.ing">进行中</view>
                    <view class="event-tag post" v-else>报名中</view>
                </view>

                <view class="event-content">
                    <view class="event-title">{{ event.title }}</view>
                    <view class="event-price">
                        <image src="/static/index/moneyBg.png" mode="" />
                        <text class="price-value">总金额{{ event.totalAmount }}元</text>
                    </view>
                </view>
            </view>
            <view class="event-stats">
                <view class="stat-item">
                    <image src="/static/index/top1.svg" class="stat-icon"></image>
                    <view class="stat-text">冠军 {{ event.registered }}</view>
                </view>
                <view class="stat-item">
                    <image src="/static/index/top2.svg" class="stat-icon"></image>
                    <view class="stat-text">亚军 {{ event.registered }}</view>
                </view>
                <view class="stat-item">
                    <image src="/static/index/top3.svg" class="stat-icon"></image>
                    <view class="stat-text">季军 {{ event.registered }}</view>
                </view>
            </view>
            <view class="event-value">
                <view class="value-item">
                    <image class="value-icon" src="/static/index/competition.svg"></image>
                    <view class="value-name">中式八球</view>
                </view>
                <view class="value-item">
                    <image class="value-icon" src="/static/index/type.svg"></image>
                    <view class="value-name">
                        限档赛
                        <text class="value-num">{{ '[<4档]' }}</text>
                    </view>
                </view>
                <view class="value-item">
                    <image class="value-icon" src="/static/index/time.svg"></image>
                    <view class="value-name">2025-09-19</view>
                </view>
            </view>
            <view class="event-hr"></view>
            <view class="event-location">
                <image class="location-icon" src="/static/index/city.svg"></image>
                <view class="location-name">{{ event.location }}</view>
                <view class="location-hr"></view>
                <view class="location-km">{{ event.km }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
const hotEvents = ref([
    {
        id: 1,
        title: '2025伯乐台球00后王牌争霸赛(第六站)',
        image: '/static/bg.png',
        totalAmount: '1700',
        registered: 3000,
        followers: 1200,
        participants: 600,
        date: '2025-09-19',
        location: '山东省日照市元凰区银滩路济南台球90... ',
        km: "115.7km",
        ing: true
    },
    {
        id: 2,
        title: '2025伯乐台球00后王牌争霸赛(第六站)',
        image: '/static/3.png',
        totalAmount: '1700',
        registered: 3000,
        followers: 1200,
        participants: 600,
        date: '2025-09-19',
        km: "115.7km",
        location: '山东省日照市元凰区银滩路济南台球90...'
    },
    {
        id: 3,
        title: '2025伯乐台球00后王牌争霸赛(第六站)',
        image: '/static/2.png',
        totalAmount: '1700',
        registered: 3000,
        followers: 1200,
        participants: 600,
        date: '2025-09-19',
        km: "115.7km",
        location: '山东省日照市元凰区银滩路济南台球90...'
    }
])
</script>

<style lang="scss" scoped>
.event-list {
    .event-item {
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 24rpx;
        margin-bottom: 20rpx;

        .event-detail {
            display: flex;

            .event-image {
                width: 160rpx;
                height: 160rpx;
                position: relative;
                margin-right: 32rpx;

                image {
                    width: 100%;
                    height: 100%;
                }

                .event-tag {
                    position: absolute;
                    top: 0rpx;
                    left: 0rpx;

                    width: 88rpx;
                    height: 36rpx;
                    line-height: 36rpx;
                    text-align: center;
                    border-radius: 8rpx 0rpx 8rpx 0rpx;
                    font-size: 24rpx;
                    color: #FFFFFF;
                }

                .event-tag.post {
                    background: #FF6B6B;
                }

                .event-tag.ing {
                    background: #2DC362;
                }
            }

            .event-content {
                flex: 1;

                .event-title {
                    font-size: 30rpx;
                    color: #161723;
                    line-height: 44rpx;
                    margin-bottom: 20rpx;
                }

                .event-price {
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 44rpx;
                    padding: 0 20rpx;
                    display: inline-block;
                    position: relative;

                    .price-value {
                        position: relative;
                    }

                    image {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .event-stats {
            display: flex;
            height: 64rpx;
            background: #F5F6F8;
            border-radius: 6rpx 6rpx 6rpx 6rpx;
            margin: 24rpx 0;

            .stat-item {
                display: flex;
                align-items: center;
                gap: 4rpx;
                flex: 1;

                .stat-icon {
                    width: 36rpx;
                    height: 36rpx;
                }

                .stat-text {
                    font-size: 26rpx;
                    color: #606266;
                    line-height: 40rpx;
                }
            }
        }

        .event-value {
            display: flex;

            .value-item {
                display: flex;
                align-items: center;
                gap: 12rpx;
                flex: 1;

                .value-icon {
                    width: 28rpx;
                    height: 28rpx;
                }

                .value-name {
                    font-size: 26rpx;
                    color: #303133;
                    line-height: 40rpx;
                }

                .value-num {
                    color: #E10509;
                }
            }
        }

        .event-hr {
            width: 100%;
            height: 1rpx;
            background: #EBEEF5;
            margin: 18rpx 0;
        }

        .event-location {
            display: flex;
            align-items: center;
            gap: 12rpx;

            .location-icon {
                width: 28rpx;
                height: 28rpx;
            }

            .location-name {
                font-size: 26rpx;
                color: #303133;
                line-height: 40rpx;
                flex: 1;
            }

            .location-hr {
                width: 1rpx;
                height: 24rpx;
                background: #B3B9C3;
                margin: 0 12rpx 0 24prx;
            }

            .location-km {
                font-size: 26rpx;
                color: #606266;
                line-height: 40rpx;
            }
        }
    }
}
</style>